<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">

    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="mainImg">轮播图</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['mainImg']">
        <input type="text" nz-input formControlName="mainImg" placeholder="轮播图" style="display: none;">
        <nz-upload class="upload-list-inline"
                   [nzMultiple]="true"
                   [nzAction]="uploadDomain"
                   [nzHeaders]="headers"
                   (nzChange)="handleChange($event)"
                   [nzSize]="2048"
                   nzAccept=".jpg,.jpeg,.png,.gif"
                   nzListType="picture-card"
                   [nzShowUploadList]="false">
          <ng-container *ngIf="!entity.mainImg">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传轮播图</div>
          </ng-container>
          <img *ngIf="entity.mainImg" [src]="entity.mainImg|qCloudDomain" title="点击可修改轮播图" class="avatar">
        </nz-upload>
        <nz-form-explain *ngIf="validateForm.get('mainImg').dirty && validateForm.get('mainImg').hasError('required')">
          请选择轮播图
        </nz-form-explain>
      </nz-form-control>
      <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，我们建议您添加大小约355*187的图片</nz-form-extra>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="sortNum">排序号</nz-form-label>
      <nz-form-control [nzSpan]="10">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="10000" [nzStep]="1" [nzPlaceHolder]="'排序号'" formControlName="sortNum"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('sortNum').dirty && validateForm.get('sortNum').hasError('required')">请输入排序号</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="bannerType">轮播图模式</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['bannerType']">
        <nz-radio-group formControlName="bannerType" (ngModelChange)="changeBannerType($event)">
          <label nz-radio [nzValue]="1">普通</label>
          <label nz-radio [nzValue]="2">详情</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="validateForm.get('bannerType').dirty && validateForm.get('bannerType').hasError('required')">请选择轮播图模式</nz-form-explain>
      </nz-form-control>
      <nz-form-extra style="color: orange;padding-top: 12px;">说明：[详情]模式点击轮播图将跳转到详情页查看详情</nz-form-extra>
    </nz-form-item>
    <!--<span [ngStyle]="{'display':validateForm.get('bannerType').value == 1 ? 'none':'block'}">-->
    <span *ngIf="validateForm.get('bannerType').value == 2">
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired nzFor="title">标题</nz-form-label>
          <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['title']">
            <input type="text" nz-input formControlName="title" placeholder="标题">
            <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('required')">请输入标题</nz-form-explain>
            <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('maxlength')">不能超过60个字</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired nzFor="description">
            描述
          </nz-form-label>
          <!--<button nz-button type="button" nzType="dashed" (click)="editorContent()"><i class="anticon anticon-edit"></i>点击编辑商品详情</button>-->
          <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['description']" class="content-class">
            <textarea rows="6" nz-input formControlName="description" placeholder="描述" style="display: none;"></textarea>
            <div id="content-section" title="点击可进行内容编辑修改" (click)="showEdit()" style="text-align: center;display:block;height: 582px;border: 1px solid #d9d9d9;overflow-y: auto;cursor: pointer;" #content></div>
            <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').hasError('required')">请输入描述</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
    </span>
    <div nz-form-item nz-row  style="text-align: center;border-top: 1px solid #d0d0d0; padding-top: 12px;">
      <button nz-button type="submit" [nzType]="'primary'" >保存</button>
    </div>
  </form>
  <full-screen-editor [contentVal]="entity.description" (close)="showEdit()" (contentCallback)="contentCallback($event)" *ngIf="isShow"></full-screen-editor>
</nz-card>
